<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    问题:
    1,动态改变icon,解决办法:
    先把几个icon的类名写好,然后在created定义好数组,
    created() {
    this.classMap = ['jian','jian1','jian2','jian3','jian4',]
    }
    然后在标签内动态传,type就是下标,这样就可以动态显示icon了 :class="classMap[seller.supports[0].type]"

    2,文字过长加...
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    3,给图片设置模糊程度
    filter: blur(10px);

    4,关闭按钮始终在底部,内容增多也在下面
    不能用filex,内容多会盖住
    在盒子里面在写两个盒子, 这里遇到了一个项目中经常遇到的问题,子组件margin-top会影响父元素,这里我用padding替换了,也可以加边框,也可以清除浮动
    .detail-wrapper{ 这是又一个大盒子
    min-height: 100%;
    .detail-main{ 大盒子里面的内容盒子
    padding-top: 64px;
    padding-bottom: 64px;
    }
    }
    .detail-close{ 关闭按钮
    position: relative;
    width: 32px;
    height: 32px;
    margin: -64px auto 0 auto;
    clear: both;
    font-size: 32px;
    }

    5,遇到了一个牛逼的东西,就是小星星打分,用户打积分,显示对应的小星星,4.5分,就是四个半星星,
    这段代码写成组件了,在components>star>star.vue里面
    代码里面也有思路,我在这大概写一下
    首先用到了父子通信,这个组件是子组件,可以拿到分数和大小
    <div class="star" :class="starType">
        <span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" :key="index"></span>
    </div>
    根据拿到的分数,声明一个数组,求整数,求有没有小数点,然后push到数组里面,不满足5个星星的长度就while循环插入几个没星星的,最后return出去,这个逻辑确实牛逼

    还有css部分的,把该定义好的类名和图片什么的都提前写好,具体的去vue里面看吧,我写好了

    6,最关键的地方,滑动,这里是引用了better-scroll,在简书上看了别人对这方面的解释还是有点懵逼,大概是获取到每个li的clientHeight然后累加给listHeight,然后去循环,判断下标,然后滑动实现联动,回头再好好研究一下

    7,@click.stop="pay" 阻止默认事件,冒泡

    8,BSscroll的基本用法知道了,绑定到最外面的盒子,然后在methods里面设置
    this.$nextTick(() => {
    if (!this.scroll) {
    this.scroll = new BScroll(this.$refs.food, {
    click: true
    });
    } else {
    this.scroll.refresh();
    }
    });

    9, 全局设置,
    第一个值是事件源,第二个是事件源下的具体什么,第三个是设置为什么
    import Vue from "vue";
    Vue.set(this.food, "count", 1);

    10,大概明白了scss的&的用法,就是额外加类名的时候可以用&.active这种类型,还有子父通信今天也弄明白了


    11,组件内引入公用方法函数
    import {formatDate} from "../../../public/js/data"

    //时间戳,这个不是属于什么生命周期的,是独立的哈
    //时间戳
    filters: {
        formateDates(time) {
        let date = new Date(time);
        return formatDate(date, "yyyy-MM-dd hh:mm");
        }
    },


    export function formatDate(date,str){
        if(/(y+)/.test(str)){
            str = str.replace(RegExp.$1,(date.getFullYear()+"").substr(4-RegExp.$1.length))
        }
        let o = {
            "M+":date.getMonth()+1,
            "d+":date.getDate(),
            "h+":date.getHours(),
            "m+":date.getMinutes(),
            "s+":date.getSeconds()
        }
        for(let k in o){
            if(new RegExp(`(${k})`).test(str)){
                let s = o[k]+"";
                str = str.replace(RegExp.$1,(RegExp.$1.length===1)?s:padLeftZero(s))
            }
        }
        return str;
    }
    
    function padLeftZero(s){
        return ("00"+s).substr(s.length);
    }
</body>

</html>